export const responsiveCode = {
	state: `import { useState } from "react";\nimport { Button, Card, Typography, Space } from "tdesign-react";\n \nconst { Text } = Typography;\nconst Responsive = () => {\n  const [count, setCount] = useState<number>(0);\n  const handleAdd = () => {\n    setCount((prev: number) => prev + 1);\n  };\n  const handleMinus = () => {\n    setCount((prev: number) => prev - 1);\n  };\n  return (\n    <>\n      <Card title="useState">\n        <Space>\n          <Text>{count}</Text>\n          <Button onClick={handleAdd}>+</Button>\n          <Button onClick={handleMinus} disabled={Boolean(!count)}>\n            -\n          </Button>\n        </Space>\n      </Card>\n    </>\n  );\n};\n \nexport default Responsive;`
};

export const expressionCode = [
	{
		title: "1.插入变量",
		introduce: "你可以在大括号中插入变量，以便在 JSX 中显示其值。",
		code: `const name = "Alice";\n \nconst App = () => {\n  return <div>{name}</div>;\n};`
	},
	{
		title: "2.插入函数调用",
		introduce: "你可以在大括号中调用函数，并显示其返回值。",
		code: `const getCurrentDate = () => {\n  return new Date().toLocaleDateString();\n};\n \nconst App = () => {\n  return <div>Today is {getCurrentDate()}</div>;\n};`
	},
	{
		title: "3.条件表达式",
		introduce: "你可以使用三元运算符进行条件渲染。",
		code: `const isLoggedIn = true;\n \nconst App = () => {\n  return <div>{isLoggedIn ? "Welcome back!" : "Please log in."}</div>;\n};`
	},
	{
		title: "4.运算表达式",
		introduce: "你可以在大括号中进行简单的数学运算。",
		code: `const a = 5;\nconst b = 3;\n \nconst App = () => {\n  return <div>The sum is {a + b}</div>;\n};`
	},
	{
		title: "5.对象属性访问",
		introduce: "你可以访问对象的属性并显示其值。",
		code: `const user = {\n  name: "Bob",\n  age: 30,\n};\n \nconst App = () => {\n  return <div>Name: {user.name}, Age: {user.age}</div>;\n};`
	}
];

export const conditionalCode = [
	{
		title: "1.使用if语句（在函数体外或组件逻辑中）",
		introduce: "在组件的render方法中，根据条件决定返回何种内容。",
		code: `function UserGreeting(props) {\n  if (props.isLoggedIn) {\n    return <h1>欢迎回来!</h1>;\n  } else {\n    return <h1>请先登录。</h1>;\n  }\n}`
	},
	{
		title: "2.逻辑与（&&）运算符",
		introduce: "用于渲染一个组件或元素，当条件为true时，渲染指定的内容；否则，不渲染任何内容。",
		code: `function Greeting(props) {\n  return (\n    <div>\n      {props.isLoggedIn && <h1>欢迎回来!</h1>}\n      {!props.isLoggedIn && <h1>请先登录。</h1>}\n    </div>\n  );\n}`
	},
	{
		title: "3.三元运算符（?:）",
		introduce: "适用于有两个明确的输出选择的场景，使代码更加简洁。",
		code: `function UserStatus(props) {\n  return <h1>{props.isLoggedIn ? '欢迎回来!' : '请先登录。'}</h1>;\n}`
	},
	{
		title: "4.switch-case语句",
		introduce: "当有多个条件导致不同的渲染时，可使用switch-case语句，保持代码的组织性和可读性。",
		code: `function Greeting(props) {\n  switch (props.status) {\n    case 'loggedIn':\n      return <h1>欢迎回来!</h1>;\n    case 'loggedOut':\n      return <h1>请先登录。</h1>;\n    default:\n      return <h1>Hello, stranger!</h1>;\n  }\n}`
	},
	{
		title: "5.枚举值映射",
		introduce: "根据条件从对象中检索对应的组件或元素进行渲染，提高代码的可读性和可维护性。",
		code: `const GreetingMap = {\n  loggedIn: <h1>欢迎回来!</h1>,\n  loggedOut: <h1>请先登录。</h1>,\n  default: <h1>Hello, stranger!</h1>,\n};\n \nfunction Greeting(props) {\n  return <div>{GreetingMap[props.status] || GreetingMap.default}</div>;\n}`
	}
];
export const reactMapRanderCode = [
	{
		title: "1.使用map方法",
		introduce: "map方法是列表渲染的核心。它遍历数组中的每个元素，并返回一个包含渲染结果的新数组。",
		code: `import React from 'react';\n \nfunction ListRenderingExample() {\n  const fruits = ['苹果', '香蕉', '橙子'];\n \n  return (\n    <ul>\n      {fruits.map((fruit, index) => (\n        <li key={index}>{fruit}</li>\n      ))}\n    </ul>\n  );\n}\n \nexport default ListRenderingExample;`
	},
	{
		title: "2.渲染对象数组",
		introduce: "如果数组中的元素是对象，可以通过对象属性访问并渲染。",
		code: `import React from 'react';\n \nfunction UserList() {\n  const users = [\n    { id: 1, name: 'Alice', age: 25 },\n    { id: 2, name: 'Bob', age: 30 },\n    { id: 3, name: 'Charlie', age: 35 },\n  ];\n \n  return (\n    <ul>\n      {users.map((user) => (\n        <li key={user.id}>\n          {user.name} - {user.age}岁\n        </li>\n      ))}\n    </ul>\n  );\n}\n \nexport default UserList;`
	},
	{
		title: "3.动态组件渲染",
		introduce: "可以根据数组中的数据动态渲染不同的组件。",
		code: `import React from 'react';\n \nfunction DynamicComponentList() {\n  const components = [\n    { id: 1, component: 'Button', label: '提交' },\n    { id: 2, component: 'Input', label: '用户名' },\n    { id: 3, component: 'Checkbox', label: '同意条款' },\n  ];\n \n  const renderComponent = (type, label) => {\n    switch (type) {\n      case 'Button':\n        return <button>{label}</button>;\n      case 'Input':\n        return <input type="text" placeholder={label} />;\n      case 'Checkbox':\n        return <input type="checkbox" /> <span>{label}</span>;\n      default:\n        return null;\n    }\n  };\n \n  return (\n    <div>\n      {components.map((item) => (\n        <div key={item.id}>{renderComponent(item.component, item.label)}</div>\n      ))}\n    </div>\n  );\n}\n \nexport default DynamicComponentList;`
	}
];
export const reactComponentCode = [
	{
		title: "1.函数组件",
		introduce: "函数组件的语法更加简洁，减少了样板代码，使得组件更容易编写和理解。",
		code: `import React from 'react';\n \nfunction Greeting(props) {\n  return <h1>Hello, {props.name}!</h1>;\n}\n \n// 或使用箭头函数简写\nconst Greeting = (props) => <h1>Hello, {props.name}!</h1>;\n`
	}
];
export const propsDataCode = [
	{
		title: "1.父组件传递 Props 给子组件",
		introduce: "",
		code: `import React from 'react';\n\n// 子组件\nfunction Greeting(props) {\n  return <h1>Hello, {props.name}!</h1>;\n}\n\n// 父组件\nfunction App() {\n  return <Greeting name="Alice" />;\n}\n\nexport default App;`
	},
	{
		title: "2.解构 Props",
		introduce: "为了更简洁地访问 props，可以使用解构赋值。",
		code: `function Greeting({ name }) {\n  return <h1>Hello, {name}!</h1>;\n}`
	},
	{
		title: "3.传递多个 Props",
		introduce: "",
		code: `function UserProfile({ name, age, email }) {\n  return (\n    <div>\n      <h2>{name}</h2>\n      <p>Age: {age}</p>\n      <p>Email: {email}</p>\n    </div>\n  );\n}\n \nfunction App() {\n  return (\n    <UserProfile \n      name="Bob" \n      age={30} \n      email="bob@example.com" \n    />\n  );\n}`
	},
	{
		title: "4.Props 的高级用法",
		introduce: "子组件可以通过 props 调用父组件传递的函数，实现子组件向父组件通信。",
		code: `import React, { useState } from 'react';\n\nfunction Child({ onButtonClick }) {\n  return <button onClick={onButtonClick}>Click Me</button>;\n}\n\nfunction Parent() {\n  const [count, setCount] = useState(0);\n\n  const handleClick = () => {\n    setCount(count + 1);\n  };\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <Child onButtonClick={handleClick} />\n    </div>\n  );\n}\n\nexport default Parent;`
	}
];
export const stateDataCode = [
	{
		title: "1.函数组件中的 State",
		introduce: "在函数组件中，State 通过 useState Hook 管理",
		code: `function Counter() {\n  const [count, setCount] = useState(0);\n  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;\n}`
	},
	{
		title: "2.函数组件中的 Context ",
		introduce: "用于跨组件层级共享状态",
		code: `const ThemeContext = createContext();\nfunction ThemeProvider({ children }) {\n  const [theme, setTheme] = useState('light');\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}`
	}
];
export const reactEventCode = [
	{
		title: "1.函数组件中的事件处理",
		introduce: "",
		code: `import React from 'react';\n\nfunction Button() {\n  const handleClick = () => {\n    console.log('Button clicked!');\n  };\n\n  return <button onClick={handleClick}>Click Me</button>;\n}\n\nexport default Button;`
	},
	{
		title: "2.访问合成事件对象",
		introduce: "事件处理函数接收合成事件对象作为参数，可通过其方法操作事件。",
		code: `function handleClick(event) {\n  event.preventDefault(); // 阻止默认行为\n  console.log('Clicked:', event.target);\n}`
	},
	{
		title: "3.使用 useCallback 优化性能",
		introduce: "在函数组件中，如果事件处理函数作为 Props 传递给子组件，且子组件依赖 React.memo，需用 useCallback 缓存函数。",
		code: `import React, { useCallback } from 'react';\n\nfunction Parent() {\n  const handleClick = useCallback(() => {\n    console.log('Clicked!');\n  }, []); // 空依赖数组表示函数不依赖任何状态\n\n  return <Child onClick={handleClick} />;\n}`
	},
	{
		title: "4.表单事件处理",
		introduce: "使用受控组件（Controlled Components）管理表单输入",
		code: `function Form() {\n  const [value, setValue] = React.useState('');\n\n  const handleChange = (event) => {\n    setValue(event.target.value);\n  };\n\n  return <input value={value} onChange={handleChange} />;\n}`
	},
	{
		title: "5.自定义事件与状态提升",
		introduce: "当多个子组件需要共享事件逻辑时，将状态和事件处理函数提升到共同父组件。",
		code: `function Parent() {\n  const [count, setCount] = React.useState(0);\n\n  const handleIncrement = () => {\n    setCount(c => c + 1);\n  };\n\n  return (\n    <div>\n      <Child onClick={handleIncrement} />\n      <p>Count: {count}</p>\n    </div>\n  );\n}`
	},
	{
		title: "6.合成事件与原生事件的混合使用",
		introduce: "如果需要访问原生事件对象，可通过 event.nativeEvent 获取",
		code: `function handleClick(event) {\n  console.log('React Synthetic Event:', event);\n  console.log('Native Event:', event.nativeEvent);\n}`
	},
	{
		title: "7.自定义 Hook 封装事件逻辑",
		introduce: "将重复的事件处理逻辑封装为自定义 Hook",
		code: `function useClickOutside(ref, handler) {\n  React.useEffect(() => {\n    const handleClick = (event) => {\n      if (ref.current && !ref.current.contains(event.target)) {\n        handler();\n      }\n    };\n    document.addEventListener('mousedown', handleClick);\n    return () => document.removeEventListener('mousedown', handleClick);\n  }, [ref, handler]);\n}\n\nfunction Dropdown() {\n  const ref = React.useRef();\n  useClickOutside(ref, () => console.log('Clicked outside!'));\n  return <div ref={ref}>Dropdown Content</div>;\n}`
	}
];
